<script lang="ts" setup>
import Icon from '@/components/Icon/src/Icon.vue'
import { inject, ref } from 'vue'

import CardBox from '@/components/CardBox.vue'
import { TabVal } from '../types'

const tabVal = inject<TabVal>('tabVal')

const showCodeInput = ref(false)
</script>
<template>
  <div class="BankCard">
    <div class="enter-y">
      <a @click="tabVal = 'MyAccount'">
        <Icon icon="ic:baseline-keyboard-arrow-left"></Icon> back
      </a>
    </div>

    <CardBox class="max-w-500px mt-3 mx-auto enter-y" title="Google Auth">
      <div class="mt-6">
        <img
          class="mx-auto !w-5/10"
          src=""
          alt=""
        />
      </div>

      <div class="flex justify-center mt-6">
        <a-button
          @click="showCodeInput = true"
          type="primary"
          class="big !w-6/10"
          >Bind</a-button
        >
      </div>

      <div v-if="showCodeInput" class="flex justify-center mt-6">
        <a-input type="text" class="!w-3/10 text-center" placeholder="Code" />
      </div>
    </CardBox>
  </div>
</template>
